import React, { Component } from 'react'
import { Icon } from 'antd-mobile'
import { helper } from '../utils'

function padRight(str,len=6 ){
  if (!str) {
    return ''
  }
  if (str.length >= len) {
    return str
  } else {
    return padRight(str+"0",len)
  }
}

export default class MarketBtnItem extends Component {
	render() {
		const { sellPrice, buyPrice, length, askPriceVar, bidPriceVar } = this.props
		return (
			<div className="rt-market-btn">
				<div
					className="-left"
					onClick={
						() => {
							this.props.onClick(0)
						}
					}
				>
					<span className="-left-icon">
						<Icon type={require('static/svg/icon_39.svg')}/>
					</span>
					<span className="-left-red">
						{helper.onHandleStr(padRight(helper.transform(String(sellPrice)), length), String(sellPrice))}
					</span>
				</div>
				<div className="-center">
					{helper.accMul(helper.accSub(askPriceVar,bidPriceVar), 100)}
				</div>
				<div
					className="-right"
					onClick={
						() => {
							this.props.onClick(1)
						}
					}
				>
					<span className="-right-icon"> 
						<Icon type={require('static/svg/icon_43.svg')}/>
					</span>
					<span className="-right-green">
						{helper.onHandleStr(padRight(helper.transform(String(buyPrice)), length), String(buyPrice))}
					</span>
				</div>
			</div>
			)
	}
}